<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ page import="service.*, constants.AirlineReservationServiceConstants" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script type="text/javascript"><!--

  function loadPage(){
	<% if(request.getAttribute("issueTicket")!=null){%>

		$("#divIssueTicket").show();
	
	<% request.removeAttribute("issueTicket");
	} %>


	

	  
  }

  $(document).ready(function() {
	  var myDate=new Date();
	  myDate.setDate(myDate.getDate()+1);
	    $("#datepicker1").datepicker({
	    	   onSelect: function(dateText, inst) { 

				$("#start_date").val(dateText);
				$("#datepicker1").hide();


	    	    },
	    	    dateFormat: "yy-mm-dd",
	    	    minDate: myDate   	     

	    
	    });
	    $("#datepicker2").datepicker({
	    	   onSelect: function(dateText, inst) { 

			$("#return_date").val(dateText);
			$("#datepicker2").hide();


    	    },
    	    dateFormat: "yy-mm-dd",
    	    minDate: myDate 
    });
	  });
  function displayCalendar(source){

	  if(source.id == "calendar1"){
		  if(document.getElementById("datepicker1").style.display == "none"){
			  $("#datepicker1").show();
		  }else{
			  $("#datepicker1").hide();
		  }
	  }else{
		  if(document.getElementById("datepicker2").style.display == "none"){
			  $("#datepicker2").show();
		  }else{
			  $("#datepicker2").hide();
		  }
	  }
 }


  function hideOrShowReturn(){
	
		if($("input[@name='trip_type']:checked").val() == "one_way"){
			$("#return_date").hide();
			$("#calendar2").hide();
			$("#datepicker2").hide();
			$("#label_return").hide();
		}else{
			$("#return_date").show();
			$("#calendar2").show();
			$("#label_return").show();
			//$("#datepicker2").show();
		}
  }

  function searchFlights(){

	  $("#divIssueTicket").hide();
		var origin = $('#origin').val();
		var destination = $('#destination').val();
		var numTravelers = $('#numTravelers').val();
		var startDate = $('#start_date').val();
		var returnDate = $('#return_date').val();
		var tripType = $("input[@name='trip_type']:checked").val(); 

		if(validate() == true){
			$("#divLoading").show();
			  $("#divFlights").hide();
			
		  $.ajax({
			  type: "POST",
			  url: 'searchFlights.do',
			  data: "origin="+origin+"&destination="+destination+
			        "&startDate="+startDate+"&returnDate="+returnDate+
			        "&tripType="+tripType+"&numTravelers="+numTravelers,
			  success: searchFlightSuccess
			  
			});
		}
  }

	function validate(){
		if(document.getElementById("origin").selectedIndex == 0){
			alert("Origin can not be empty");
			return false;
		}
		if(document.getElementById("destination").selectedIndex == 0){
			alert("Destination can not be empty");
			return false;
		}		
		if($('#origin').val() == $('#destination').val()){
			alert("Source and destination can not be same");
			return false;
		}
		var startDate = $('#start_date').val();
		var returnDate = $('#return_date').val();
		
		if (Date.parse(startDate) > Date.parse(returnDate)) {
			alert("Start Date cannot be after End Date!")
			return false;
		}
			return true;
	}
  
  function searchFlightSuccess(data){
	  $("#divLoading").hide();
	  $("#divFlights").show();
	  $("#divFlights").html(data);

	  
  }

  function cancel(){
	  document.getElementById("numTravelers").disabled = false;
	  $("#divError").hide();
	  $("#userTable").hide();
	   $("#divPassenger").hide();
	  
  }

  function bookTickets(){
	  
	    var val1 = 0, val2 = 0;
	    val1 = $('input:radio[name=flightId_oneway]:checked').val();
	    val2 = $('input:radio[name=flightId_return]:checked').val();
	/*  for( i = 0; i < document.flights.flightId_oneway.length; i++ )
	  {
		  if( document.flights.flightId_oneway[i].checked == true )
		  val1 = document.flights.flightId_oneway[i].value;
	  } 
	  for( i = 0; i < document.flights.flightId_return.length; i++ )
	  {
		  if( document.flights.flightId_return[i].checked == true )
		  val2 = document.flights.flightId_return[i].value;
	  }*/


		
	if(!val1&& !val2){
		alert("Please choose a flight to book ticket");
	}else{

		$("#divError").hide();
		  $("#userTable").hide();
		   $("#divPassenger").hide();
		   $("#divFlightDetails").hide();
		   //Disable all search fields so that user is not able to change the search criteria
		   $('#origin').attr("disabled", true);
		   $('#destination').attr("disabled", true);
		   $('#numTravelers').attr("disabled", true);
		   $("#divLoading").show();
		   
		   
		  var numTravelers = $('#numTravelers').val();
		  var origin = $('#origin').val();
			var destination = $('#destination').val();
			var numTravelers = $('#numTravelers').val();
			var startDate = $('#start_date').val();
			var returnDate = $('#return_date').val();
			
		 $.ajax({
			  type: "POST",
			  url: 'fillPassengerDetails.do',
			  data: "flight1="+val1+"&flight2="+val2+"&numTravelers="+numTravelers+
			  "&startDate="+startDate+"&returnDate="+returnDate+"&origin="+origin+"&destination="+destination,
			  success: fillPassengerDetailsSuccess
			  
			});
			
	}
		
	  
  }

  function fillPassengerDetailsSuccess(data){

	  $("#divLoading").hide();
	  $("#divPassenger").html(data);
	  $("#userTable").show();
	 // alert(data);
  }

  function authenticateUser(){

	  var username = $('#username').val();
	  var password = $('#password').val();
	  $.ajax({
		  type: "POST",
		  url: 'authenticateUser.do',
		  data: "username="+username+"&password="+password,
		  success: authenticateUserSuccess
		  
		});
  }

  function authenticateUserSuccess(data){

	  if(data=="true"){
		  $("#divError").hide();
		  $("#userTable").hide();
		  
		  $("#divPassenger").show();
		  
	  }else{
		  
			$("#divError").show();
			$("#divPassenger").hide();
			$("#userTable").show();
	  }
  }

  function register(){
	  window.open("customer/customerRegistration.jsp?from=customer", "register", 'height=600,width=700');
  }
  --></script>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Airline Reservation System</title>
</head>
<body onload="loadPage()">
<table>
<tr>
<td>
<a href="signin.jsp">Sign in</a>
</td>
</tr>
<tr style=" height : 298px;">

<td style=" FONT-SIZE: small;">
<%
	AirlineReservationServiceProxy proxy = new AirlineReservationServiceProxy(
			AirlineReservationServiceConstants.SERVICE_URL);
	
	String[] cities = proxy.retreiveCities();


%>
<table align="left" style="BACKGROUND-COLOR: #c0c0c0;COLOR: #004040; FONT-WEIGHT: bold; FONT-SIZE: x-small; FONT-FAMILY: 'Verdana'; vertical-align: top; width : 300px;
border-bottom-style:solid; ; border-bottom-color: gray; 
					border-right-style:solid; ; border-right-color: gray; 
					border-left-style:solid; ; border-left-color: gray; border-top-style:solid; ; border-top-color: gray">
<tr>
	
		<td colspan="2" align="left" style="FONT-SIZE: small; FONT-WEIGHT: bold; FONT-FAMILY: 'Verdana';">
			 <input type="radio" checked="checked" onclick="hideOrShowReturn()" name="trip_type" value="round_trip"></input> Round Trip 
			  <input type="radio" onclick="hideOrShowReturn()" name="trip_type" value="one_way"></input> One-way
		
	   </td>
	
	</tr>
	<tr>
		<td align="right">
			Origin
		</td>
		<td>
			<select id="origin">
				<option selected="selected">-----Select Source-----</option>
				<% for (String city : cities) {%>
				<option ><%=city %></option>
				<%} %>
			</select>
		</td>
	</tr>
	<tr>
		<td align="right">
			Destination
		</td>
		<td>
			<select id="destination">
				<option selected="selected">--Select Destination--</option>
				<% for (String city : cities) {%>
				<option ><%=city %></option>
				<%} %>
				
			</select>
		</td>
	
	
	</tr>
	
	<tr>
		<td align="right"> Start Date</td>
		<td align="left"> <input type="text" id="start_date" name="start_date" readonly="readonly"></input><img id="calendar1" src="image/calendar.png" onclick="displayCalendar(this)"></img></td>
	</tr>
	<tr>
			<td><label id="label_return">Return Date</label></td>
		<td align="left"> <input type="text"  id="return_date" name="return_date" readonly="readonly"></input><img id="calendar2" src="image/calendar.png" onclick="displayCalendar(this)"></img></td>
	
		
	
	</tr>
	
	<tr>
		<td>&nbsp;
		</td>
		<td>
			<div id="datepicker1" style="display:none; font-size:90%;"></div>
			<div id="datepicker2" style="display:none; font-size:90%;"></div>
		</td>
		<td colspan=2>&nbsp;
		</td>
		
	</tr>
	<tr>
		<td>
			# Travelers
		</td>
		<td>
			<select id="numTravelers">
				<option>1</option>
				<option>2</option>
				<option>3</option>
				<option>4</option>
				<option>5</option>
			</select>
		</td>
	</tr>
	<tr>
		<td colspan=4 align="center"><input type="button" value="Search" onclick="searchFlights()" style="FONT-WEIGHT: bold; FONT-FAMILY: 'Verdana'; FONT-SIZE: x-small;"/></td>
	</tr>
		
	
</table>
</td>
<td style=" width : 699px;">
<div id="divFlights" style="" ></div>
 <div id="divLoading" style="width:100%;display:none">
	<table width="100%" align="center" style=" width : 977px;">
		<tr>
			<td align="center" style="FONT-WEIGHT: bold; width : 888px;"><img  src="http://www.berkline.com/images/loading.gif" style="height : 242px; width : 420px;"></img></td>
			
		</tr>	
	</table>
	
</div>

<div id="divIssueTicket" style="display:none">

<jsp:include page="issueTicket.jsp"></jsp:include>

</div>


</td>
</tr>
</table>

</body>
</html>